<template>
  <div ref="editPremises"
       class="modal fade"
       id="addPremiseAddress"
       tabindex="-1"
       role="dialog"
       aria-labelledby="myModalLabel"
       aria-hidden="true">
    <div class="self-modal-dialogTwo">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button"
                  class="close"
                  data-dismiss="modal"
                  data-target="#addPremiseAddress"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
          <h2 class="modal-title text-center">
            <font class="title-color">为楼盘选择位置</font>
          </h2>
        </div>
        <div class="searchAddressInput">
          <div id="r-result">
            <el-autocomplete id="suggestId"
                             size="small"
                             class="inline-input"
                             ref="autocomplete"
                             v-model="inputValues"
                             :fetch-suggestions="querySearch"
                             placeholder="请输入内容"
                             @select="handleSelect">
              <template slot-scope="{ item }">
                <i class="el-icon-search"
                   slot="prefix">
                </i>
                <span class="name">{{ item.name}}</span>
                <span class="addr">{{ item.address}}</span>
              </template>
            </el-autocomplete>
            <el-button size="small"
                       class="o-b-color btn"
                       @click="focusSearch">搜索</el-button>
          </div>
        </div>
        <div id="l-map"
             class="bm-view">
          <!-- <baidu-map ak="mj5Ztq2ugALxuBChiUgs6H0V7Cu0hfHU"
                     class="map"
                     :zoom="15"
                     :center="center"
                     @ready="handler"
                     :scroll-wheel-zoom="true"
                     @click="clickMap"
                     @mousemove="mousemove"> -->
          <baidu-map class="map"
                     :zoom="15"
                     :center="center"
                     @ready="handler"
                     :scroll-wheel-zoom="true"
                     @click="clickMap"
                     @mousemove="mousemove">
            <bm-info-window :position="infoWindow.position"
                            :title="infoWindow.title"
                            :show="infoWindow.show"
                            class="infoWindow"
                            @click="clickMap">
              <p class="infoWindowName"
                 v-text="premiseAddressInfo.premiseName"></p>
              <p class="infoWindowAddr"
                 v-text="addressValues"></p>
            </bm-info-window>
          </baidu-map>
        </div>
        <div id="searchResultPanel"
             style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;">
        </div>
        <div class="modal-footer">
          <button type="button"
                  class="btn pull-right o-b-color"
                  style="margin-right: 20px;"
                  @click="saveAddr">确定</button>
          <button type="button"
                  class="btnTwo btn pull-right cancel"
                  @click="cancelAddr">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import BaiduMap from "vue-baidu-map/components/map/Map.vue";
// import BmInfoWindow from "vue-baidu-map/components/overlays/InfoWindow.vue";
export default {
  props: ["premiseAddressInfo"],
  data() {
    return {
      inputValues: "",
      ac: {},
      map: {},
      restaurants: [],
      latLng: {},
      infoWindow: {
        show: false,
        title: "已将此处设置为",
        position: {},
      },
      marker: {},
      addressValues: "",
      center: "北京",
    };
  },
  watch: {
    premiseAddressInfo(v) {
      // console.log(v, 99999);
      // v.lng = "";
      // v.provinceName = "上海市";
      //楼盘如果已选城市，则将搜索框的范围定位到该城市。否则为map
      this.ac.setLocation(v.provinceName || this.map);
      // 该楼盘如果有经纬度，则定点添加marker
      if (v.lng && v.lat) {
        let center = new BMap.Point(v.lng, v.lat);
        this.map.setCenter(center);
        this.infoWindow.position = { lng: v.lng, lat: v.lat + 0.0002 };
        this.infoWindow.show = true;
        this.marker = new BMap.Marker({ lng: v.lng, lat: v.lat });
        this.map.addOverlay(this.marker);
      } else {
        // 没有经纬度，则将地图中心切换到省市区的中心，并清除页面的所有覆盖物
        this.map.clearOverlays();
        if (v.provinceName) {
          this.center = v.provinceName;
          var myGeo = new BMap.Geocoder();
          myGeo.getPoint(v.provinceName, (point) => {
            if (point) {
              this.map.centerAndZoom(point, 15);
            }
          });
        }
      }
      this.addressValues = v.address;
      this.inputValues = v.address;
    },
  },
  components: {
    // BaiduMap,
    // BmInfoWindow,
  },
  methods: {
    // 点击地图，则在该点添加marker和info信息框，同时获取该点的地址信息addressValues
    clickMap(type) {
      // console.log(type.Ag);
      this.map.clearOverlays(); //清除地图上所有覆盖物,否则会自动弹出该点百度地图自带的info框
      this.infoWindow.position = { lng: type.Ag.lng, lat: type.Ag.lat };
      // 先移除旧的marker,再添加新的marker
      this.map.removeOverlay(this.marker);
      this.infoWindow.title = "已将此处设置为";
      this.marker = new BMap.Marker({ lng: type.Ag.lng, lat: type.Ag.lat });
      let point = new BMap.Point(type.Ag.lng, type.Ag.lat);
      this.map.addOverlay(this.marker);
      var geoc = new BMap.Geocoder();
      geoc.getLocation(point, (rs) => {
        // console.log(rs);
        var addComp = rs.addressComponents;
        this.addressValues =
          addComp.street + addComp.streetNumber || this.addressValues;
      });
    },
    // 鼠标移动，显示info框
    mousemove(type) {
      this.infoWindow.position = {
        lng: type.Ag.lng,
        lat: type.Ag.lat + 0.0001,
      };
      this.infoWindow.show = true;
      this.infoWindow.title = "点击将此处设置为";
    },
    infoWindowClose(e) {
      this.infoWindow.show = false;
    },
    infoWindowOpen(e) {
      this.infoWindow.show = true;
    },
    // 估计搜索按钮，input框聚焦，自动模糊搜索
    focusSearch() {
      this.$refs.autocomplete.handleFocus();
    },
    querySearch(queryString, cb) {
      let list = this.ac.getResults().Hr;
      // console.log(this.ac.getResults(), 9999);
      this.restaurants = list.map((item) => {
        let data = {
          name: item.business,
          address: item.province + item.city + item.district + item.street,
        };
        return data;
      });
      cb(this.restaurants);
    },
    // 点击模糊搜索的某一条数据
    handleSelect(item) {
      this.inputValues = item.name;
      this.addressValues = item.name;
      this.map.clearOverlays(); //清除地图上所有覆盖物
      let myFun = () => {
        var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
        // 选中点的经纬度
        console.log(pp, 99);
        this.map.centerAndZoom(pp, 18);
        this.marker = new BMap.Marker(pp);
        this.map.addOverlay(this.marker);
        this.infoWindow.show = true;
        this.infoWindow.position = {
          lng: pp.lng,
          lat: pp.lat + 0.0001,
        };
        this.infoWindow.title = "已将此处设置为";
        var geoc = new BMap.Geocoder();
        geoc.getLocation(pp, (rs) => {
          // console.log(rs, 88888);
          var addComp = rs.addressComponents;
          this.addressValues =
            addComp.street + addComp.streetNumber || this.addressValues;
        });
      };
      var local = new BMap.LocalSearch(this.map, {
        //智能搜索
        onSearchComplete: myFun,
      });
      local.search(item.address + item.name);
    },
    handler({ BMap, map }) {
      this.map = map;
      this.ac = new BMap.Autocomplete({
        input: "suggestId",
        location: this.map,
      });
    },
    // 确定
    saveAddr() {
      // 如果没有定位，则提示
      if (!this.marker.show) {
        layer.msg("请选择楼盘位置");
        return false;
      }
      $("#addPremiseAddress").modal("hide");
      this.$emit("savePremiseAddress", {
        ...this.marker.point,
        premisesAddress: this.addressValues,
      });
    },
    cancelAddr() {},
  },
};
</script>
<style>
/*地图标题*/
.BMap_bubble_title {
  color: white;
  font-size: 13px;
  text-align: center;
  padding-left: 5px;
  padding-top: 5px;
  background-color: #e98d4a;
}
/* 消息内容 */
.BMap_bubble_content {
  background-color: #e98d4a;
  padding: 5px;
  text-align: center;
}
.infoWindow {
  background-color: #fff;
  text-align: center;
  min-height: 40px;
}
.infoWindowName {
  font-weight: bold;
}
.infoWindowAddr {
  color: #666;
}
/* 内容 */
.BMap_pop div:nth-child(9) {
  top: 25px !important;
  border-radius: 7px;
  min-height: 80px;
}
.BMap_pop div:nth-child(8) {
  top: 65px !important;
}
.BMap_pop div:nth-child(5) {
  display: none;
}
/* 左上角删除按键 */
.BMap_pop img {
  top: 35px !important;
  left: 215px !important;
}
.BMap_top {
  display: none;
}
.BMap_bottom {
  display: none;
}
.BMap_center {
  display: none;
}
/* 隐藏边角 */
.BMap_pop div:nth-child(1) div {
  display: none;
}
.BMap_pop div:nth-child(3) {
  display: none;
}
.BMap_pop div:nth-child(7) {
  display: none;
}
</style>
<style scoped>
@import url("../../assets/css/multiple-select.css");
.bm-view {
  width: 100%;
  height: 80%;
}
.title-color {
  color: #000 !important;
}
.searchAddressInput {
  /* height: 10%; */
  height: 60px;
  padding: 15px;
}
.inputValue {
  width: 200px;
  height: 30px;
  border: 1px solid #e98d4a;
  border-radius: 5px;
}
.modal-footer {
  display: flex;
  justify-content: center;
}
.modal-footer .btnTwo {
  margin-left: 50px;
}
.searchAddressInput .btn {
  margin-left: 10px;
}
.cancel {
  background-color: rgb(204, 204, 204);
  color: #fff;
}
.el-autocomplete-suggestion .addr {
  font-size: 12px;
  color: #999;
  margin-left: 10px;
}
.el-autocomplete-suggestion .name {
  color: #333;
}
.inline-input {
  width: 300px;
}
.map {
  height: 100%;
}
.o-color {
  color: #e98d4a !important;
}
.o-b-color {
  background-color: #e98d4a !important;
  border-color: #e98d4a !important;
  color: #fff !important;
}
.o-border-color {
  border-color: #e98d4a !important;
}
.g-color {
  background: #1abc9c !important;
  color: #fff !important;
}
.r-border {
  border-right: 1px solid #ddd;
}
.modal-content {
  margin-top: 10px !important;
  height: 100%;
}
.layui-timeline {
  padding-top: 20px;
}
.timeline-height {
  height: 80px !important;
}
.self-modal-dialog {
  width: 70%;
  margin: 10% auto;
  height: 70%;
}
.self-modal-dialogTwo {
  width: 70%;
  margin: 5% auto;
  height: 80%;
}
.layui-timeline {
  padding-left: 120px;
}
.fillInfoStatus {
  position: absolute;
  left: -70px;
  top: 0;
  z-index: 10;
  width: 50px;
  height: 20px;
  line-height: 20px;
  background-color: #e4e4e4;
  color: #999999;
  text-align: center;
  border-radius: 3px;
}
.layui-text h3 {
  font-size: 15px;
  font-weight: 600;
}
.layui-timeline-axis {
  position: absolute;
  left: -3px;
  top: 0;
  z-index: 10;
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-color: #fff;
  border-radius: 50%;
  text-align: center;
  border: 1px solid #e2e2e2;
}
.face-img {
  text-align: center;
  font-size: 15px;
  color: #000;
}
.add-huxing {
  width: 130px !important;
  height: 120px;
  position: relative;
  padding: 15px !important;
  border: 1px dashed #e2e2e2;
  background-color: #fff;
  text-align: center;
  cursor: pointer;
  color: #999;
  display: inline-block;
  margin: 20px 0 50px 0;
}
.add-huxing .layui-icon {
  font-size: 50px;
  color: #f87142;
}
.housing-list li {
  border-bottom-style: none;
  padding: 15px 0 !important;
}
.list-info-template .control-label {
  font-weight: normal !important;
  font-size: 15px;
  min-width: 95px;
}
.list-info-template .form-control {
  height: 36px !important;
}
.list-info-template .control-details label {
  margin-right: 0 !important;
}
.base-title {
  font-weight: 700;
  font-style: normal;
  font-size: 18px;
  text-align: left;
  color: #000;
  margin-top: 20px;
  height: 33px;
  line-height: 33px;
}
.base-title .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #f87142;
  margin: 0 15px;
}
.base-title .tips {
  font-size: 13px;
  color: #999999;
  font-weight: normal;
  padding-left: 10px;
}
.base-title .questionImg {
  width: 18px;
  height: 18px;
}
.base-title .linkM2Btn {
  display: inline-block;
  width: 110px;
  height: 30px;
  line-height: 30px;
  background: #3365ff;
  color: #fff;
  font-size: 14px;
  font-weight: normal;
  text-align: center;
  border-radius: 3px;
}
.base-title .m2TipContent {
  position: absolute;
  z-index: 99999;
  display: inline-block;
  width: 260px;
  height: 100px;
  font-size: 13px;
  font-weight: normal;
  line-height: 20px;
  background: #f2f2f2;
  color: #3365ff;
  padding: 10px;
  right: 0.5vw;
  top: 26px;
  border-radius: 3px;
}

.base-title-small {
  font-weight: 500;
  font-size: 16px;
  font-style: normal;
  text-align: left;
  color: #000;
  padding: 0px 40px;
  height: 25px;
  line-height: 25px;
  background-color: #f0f0f0;
}

.user-define li {
  padding: 0px !important;
  margin: 0px !important;
}
.ms-choice {
  height: 33px !important;
  line-height: 33px !important;
}
.addHouseTypeItemBtn {
  width: 120px;
  height: 36px;
  line-height: 36px;
  border: 1px solid #f87142;
  color: #f87242;
  border-radius: 3px;
  text-align: center;
}
.delHouseTypeItemBtn {
  display: inline-block;
  width: 100px;
  height: 33px;
  line-height: 33px;
  border: 1px solid #ff6a6a;
  color: #ff6a6a;
  border-radius: 3px;
  text-align: center;
  font-size: 15px;
  font-weight: normal;
  float: right;
  margin-right: 7.5vw;
}
.ivu-checkbox-group label {
  font-weight: normal !important;
}
.partThree .commonLi {
  padding-bottom: 60px;
  margin-bottom: 60px;
  margin-top: 20px;
}
.partThree .otherLi,
.partFive .otherLi {
  display: inline-block;
  padding-top: 30px;
}
.ivu-table-large td {
  height: 40px !important;
}
.ivu-table-large th {
  height: 40px !important;
}
.commissionTable td,
.commissionTable th,
.rewardTable td,
.rewardTable th {
  border: 1px solid #ddd;
  color: #666;
  height: 40px;
  text-align: center;
}
.commissionTable thead th,
.rewardTable thead th {
  background-color: #f8f8f9;
}
.commissionTable thead th:nth-child(1) {
  width: 120px;
}
.commissionTable thead th:nth-child(2) {
  width: 160px;
}
.rewardTable thead th:nth-child(1) {
  width: 80px;
}
.rewardTable thead th:nth-child(2) {
  width: 120px;
}
.rewardTable thead th:nth-child(3) {
  width: 160px;
}
.rewardTable input {
  height: 100%;
  width: 100%;
  border-style: none;
  font-size: 15px;
  padding: 0 8px;
}
.saveAndNext {
  border: 1px solid #e98d4a;
  background: #fff;
  margin-right: 20px;
}
.ivu-modal-footer {
  border-top-style: none !important;
  padding: 0 !important;
}
.timelineModal .dot {
  border: 2px solid #cfcfcf;
  width: 15px;
  height: 15px;
  border-radius: 50px;
  background: white;
  margin: auto;
  margin-bottom: -7px;
  position: relative;
}
.timelineModal .dot span {
  position: absolute;
  width: 100px;
  left: -17px;
  top: 20px;
  display: inline-flex;
  font-size: 15px;
  font-weight: bold;
}
.timelineModal .item {
  flex: 1;
  display: flex;
  border-bottom: 1px solid #ddd;
  margin-top: -10px;
}
.timelineModal .horizontalLine {
  flex: 1;
  display: flex;
  border-bottom: 1px solid #ddd;
}
.timelineModal .horizontalLine-half {
  flex: 0.5;
  display: flex;
  border-bottom: 1px solid #ddd;
}
.timelineModal .verticalLine1 {
  width: 1px;
  height: 100px;
  border: 1px solid #ddd;
  position: absolute;
  top: 10px;
  left: 220px;
}
.timelineModal .verticalLine2 {
  width: 1px;
  height: 100px;
  border: 1px solid #ddd;
  position: absolute;
  top: 10px;
  right: 245px;
}
.timelineModal .verticalLine3 {
  width: 1px;
  height: 100px;
  border: 1px solid #ddd;
  position: absolute;
  top: 10px;
  right: 70px;
}
.timelineModal .itemText1 {
  position: absolute;
  width: 130px;
  height: 36px;
  border: 1px solid #ddd;
  border-radius: 20px;
  line-height: 36px;
  text-align: center;
  font-size: 13px;
  color: #999;
  top: 110px;
  left: 160px;
}
.timelineModal .itemText2 {
  position: absolute;
  width: 130px;
  height: 36px;
  border: 1px solid #ddd;
  border-radius: 20px;
  line-height: 36px;
  text-align: center;
  font-size: 13px;
  color: #999;
  top: 110px;
  right: 175px;
}
.timelineModal .itemText3 {
  position: absolute;
  width: 130px;
  height: 36px;
  border: 1px solid #ddd;
  border-radius: 20px;
  line-height: 36px;
  text-align: center;
  font-size: 13px;
  color: #999;
  top: 110px;
  right: 5px;
}
.timelineModal .tips1 {
  position: absolute;
  top: 270px;
  left: 220px;
  color: #999;
}
.timelineModal .tips2 {
  position: absolute;
  top: 270px;
  right: 70px;
  text-align: left;
  color: #999;
}
.timelineModal .tips3 {
  position: absolute;
  top: 270px;
  right: 50px;
  text-align: right;
  color: #999;
}
.ivu-input-number,
.ivu-input-number-small .ivu-input-number-input-wrap,
.ivu-input-number-small input {
  height: 33px !important;
  line-height: 33px;
  width: 7vw !important;
}
.ivu-input-number-small .ivu-input-number-handler {
  height: 16px !important;
}
.file-image {
  margin-right: 30px;
  width: 150px;
  height: 115px;
  float: left;
  position: relative;
  margin-bottom: 10px;
}
#myTabContent {
  padding: 20px 0;
}
.fa-times-circle {
  position: absolute;
  right: 3px;
  top: 2px;
}
.selectUserName {
  width: 19vw;
  height: 36px;
  line-height: 36px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 0 8px;
  color: #ccc;
  font-size: 14px;
}
.roomSelect {
  width: 12vw !important;
  padding: 6px 4px !important;
  display: inline;
  margin-left: 0.8vw;
}

#discounts,
#features,
#cooperationRules,
#sellings,
#customers,
#saleSkills,
#introductions {
  height: 200px;
}
.control-button-wrap {
  display: inline-block;
  height: 38px;
  border-radius: 3px;
  margin-left: 22px;
}
.white_content_header {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: rgba(248, 248, 248, 1);
  border-bottom: 1px solid #d3d3d3;
  text-align: center;
}
.control-button-wrap-content {
  min-width: 120px;
  min-height: 38px;
  line-height: 38px;
  border-radius: 3px;
  text-align: center;
  color: #999;
  border: 1px solid #d3d3d3;
  margin-top: 10px;
  position: relative;
  top: -10px;
}
.control-button-wrap-content .delete-commission {
  width: 10px;
  height: 10px;
  line-height: 10px;
  font-size: 10px;
  border-radius: 50%;
  border: 1px solid #f87242;
  color: #f87242;
  cursor: pointer;
  float: right;
}
.control-button-add {
  display: inline-block;
  width: 70px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  border: 1px dashed #ccc;
  border-radius: 5px;
  color: #999;
  cursor: pointer;
  position: relative;
  top: -7px;
  margin-left: 5px;
}
.black_overlay {
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1001;
  -moz-opacity: 0.8;
  opacity: 0.5;
  filter: alpha(opacity=50);
}
.white_content {
  display: none;
  position: absolute;
  top: 20%;
  left: 36%;
  width: 380px !important;
  height: 230px !important;
  border: 1px solid #d3d3d3;
  background-color: white;
  z-index: 1002;
  border-radius: 5px;
}
.white_content_title {
  color: #f87242;
  font-weight: 700;
  font-size: 14px;
}
.white_content_close {
  float: right;
  margin: 10px 10px 0 0;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  color: #999;
  font-size: 29px;
  border: 1px solid #d3d3d3;
  cursor: pointer;
}
.first_white_input {
  width: 80%;
  margin: 10px auto 20px;
}
.first_white_input .set_format,
.set_money {
  color: #333;
  font-size: 14px;
}
.first_white_input input {
  height: 32px;
  border-radius: 3px;
  outline: 0;
  border: 1px solid #999;
}
.first_white_input input:focus {
  border: 1px solid #f87242;
}
.select_type {
  width: 50px;
  height: 32px;
  float: right;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  cursor: pointer;
}
.select_type #type_money {
  width: 25px;
  height: 32px;
  line-height: 32px;
  color: #fff;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  text-align: center;
}
.select_type #type_percent {
  width: 25px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  color: #fff;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.set_money_input::-webkit-outer-spin-button,
.set_money_input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.set_money_input[type="number"] {
  -moz-appearance: textfield;
}
.check_type {
  background: #f87242;
}
.check_type1 {
  background: #d3d3d3;
}
.first_white_button1 {
  background: #f87242;
  color: #fff;
  width: 140px !important;
  height: 36px !important;
  line-height: 36px !important;
  text-align: center;
  font-size: 16px;
  border-radius: 3px;
  cursor: pointer;
  border-style: none;
}
.file-upload {
  width: 150px;
  height: 115px;
  position: relative;
  padding: 30px;
  border: 1px dashed #e2e2e2;
  background-color: #fff;
  text-align: center;
  cursor: pointer;
  color: #999;
  display: inline-block;
}
.file-upload:hover {
  border: 1px dashed #f87142;
}
.file-upload .layui-icon {
  font-size: 50px;
  color: #f87142;
}
#myTab li {
  padding: 0 !important;
}
.delay-button {
  position: absolute;
  top: 20px;
}
/* .file-btn {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    outline: none;
    background-color: transparent;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 0;
    }
    .file-upload {
        width: 150px;
        height: 115px;
        position: relative;
        padding: 30px;
        border: 1px dashed #e2e2e2;
        background-color: #fff;
        text-align: center;
        cursor: pointer;
        color: #999;
        display: inline-block;
    } */
</style>